<template>
  <div id="app">

    <router-link to="/home">首页</router-link>


    <router-link to="/about">关于</router-link>

    <router-link to="/user/kobe/id/111">用户</router-link>

    <router-link to="/category">分类</router-link>


    <router-link to='/login'>登陆</router-link>

    <button @click="jumpToAbout">关于</button>
    <button @click="forwardOneStep">前进一步</button>

    <router-view></router-view>
  </div>
</template>

<script>

import { useRouter } from 'vue-router'

export default {
  name: 'App',
  methods: {
    // jumpToAbout() {
    //   // router
    //   this.$router.push("/about")
    // }
  },
  setup() {
    const router = useRouter();

    const jumpToAbout = () => {
      // router.push("/about")
      // router.push({
      //   path: "/about",
      //   query: {
      //     name: "why",
      //     age: 18
      //   }
      // })
      router.replace("/about")
    }

    const forwardOneStep = () => {
      router.go(1)
      // router.go(-1)
      // router.forward()
      // router.back()
    }

    return {
      jumpToAbout,
      forwardOneStep
    }
  }
}
</script>

<style>
 
</style>
